<template>
    <div class="allbox">
            <!-- 功能选择区 -->
        <div class="selection">
            <div @click="refresh(1)">
                <el-button type="info"><el-icon><RefreshRight /></el-icon></el-button>
            </div>
        </div>
        <!-- table -->
        <div class="table_box">
            <el-table  ref="ref_multipleTableRef" :data="tableData" height="90vh" @row-dblclick="db_Click"> <!--单击 和 双击 && 单选 和全选 -->
            <el-table-column type="selection" width="50" align="left" />
            <el-table-column label="序号" width="80">
                <template #default="scope">
                <div :slot-scope="scope.$index">
                    {{ (scope.$index+1) + ((currentIndex-1)*currentSize) }}
                </div>
                </template>
            </el-table-column>
            <el-table-column prop="id" label="订单编号" width="120"/>
            <el-table-column label="图片" width="200" align="left">
                <template #default="scope">
                    <div style="display: flex; justify-content: center;" :slot-scope="scope.$index">
                        <el-image :src="tableData[scope.$index].car.startImage" style="height: 150px;" fit="contain"/> 
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="title" label="名称" min-width="150" align="left"/>
            <el-table-column prop="username" label="租借人" width="120" align="center"/>
            <el-table-column prop="rentTime" label="租借时间" width="150" align="left"/>
            <el-table-column prop="backTime" label="还车时间" width="150"/>
            <el-table-column prop="rentPrice" label="租金" width="100" align="center"/>
            <el-table-column prop="status" label="状态" width="150" align="center" />
            <el-table-column fixed="right" label="执行操作" width="150" align="center">
                <template #default="scope">
                   <div>
                        <el-button type="info" style="width: 140px;"  @click.prevent="db_Click(scope.row)">
                            <el-icon size="20"><QuestionFilled /></el-icon>审批
                        </el-button>
                   </div>
                </template>
                </el-table-column>
        </el-table>
            <el-pagination
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :page-sizes="pageSize"
                :page-size="pageSize[0]"
                v-model:current-page="currentIndex"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                class="mt-4"
            />

        </div>
          <!-- form表单 -->
          <el-dialog
            v-model="dialogVisible"
            title="编辑表单"
            draggable
            width="35%">
            <el-form :model="form" class="demo-ruleForm" v-loading="loading" size="large">

            <el-form-item required label="名称" label-width="140px">
                <el-input v-model="form.title" type="text" rows="4" autocomplete="off" placeholder="请输入.." disabled/>
            </el-form-item>

            <el-form-item required label="租借者" label-width="140px">
                <el-input v-model="form.username" type="text" rows="4" autocomplete="off" placeholder="请输入.." disabled/>
            </el-form-item>

            <el-form-item required label="联系电话" label-width="140px">
                <el-input v-model="form.phone" type="text" rows="4" autocomplete="off" placeholder="请输入.." disabled/>
            </el-form-item>

            <el-form-item required label="租借时间" label-width="140px">
                <el-input v-model="form.rentTime" type="text" rows="4" autocomplete="off" placeholder="请输入.." disabled/>
            </el-form-item>

            <el-form-item required label="还车时间" label-width="140px">
                <el-input v-model="form.backTime" type="text" rows="2" autocomplete="off" placeholder="请输入.." disabled/>
            </el-form-item>

            <el-form-item required label="租借天数" label-width="140px">
                <el-input v-model="form.rentDay" type="text" autocomplete="off" placeholder="请输入.." disabled/>
            </el-form-item>

            <el-form-item required label="租金" label-width="140px">
                <el-input v-model="form.rentPrice" type="text"  autocomplete="off" placeholder="请输入.." disabled/>
            </el-form-item>

            <el-form-item required label="状态" label-width="140px">
                <el-select v-model="form.status" class="m-2" placeholder="请选择.." size="large">
                        <el-option
                        v-for="item in ['待审批','驳回订单','租借中']"
                        :key="item"
                        :label="item"
                        :value="item"
                        />
                 </el-select>
            </el-form-item>
            </el-form>
        <template #footer>
            <span class="dialog-footer">
            <el-button type="primary" @click="submit()" style="width: 80%;margin-right: 8%;height: 40px;">
                确定
            </el-button>
            </span>
        </template>
        </el-dialog>

        <messageComp ref="ref_messageComp"> </messageComp>
    </div>
  
</template>

<script setup>
import axios from "axios"
import { ref } from "vue"
import { useStore } from "vuex";
import messageComp from "../components/messageComp.vue";
const ref_messageComp = ref(null) //弹窗message组件refs
const store = useStore()
// 数据
let loading = ref(false) //加载
let dialogVisible = ref(false) //表单开关
let form = ref({}) //表单数据 el-form
let tableData = ref([]) //表格数据-el-table
let orginList = ref([]) //原始数据
let pageSize = ref([5, 10, 50, 99999])
let beforeIndex = ref(1)//之前的索引
let currentIndex = ref(1) //当前的索引
let currentSize = ref(pageSize.value[0]) //当前可视数量
let total = ref(0) //总数
// 提交
const submit = ()=>{
    updateAPI()
}
const handleSizeChange = (e)=>{
    console.log(e);
    currentSize.value = e
    tableData.value = []
    ref_messageComp.value.loading({dom:'.table_box',text:'Loading..',},500,()=>{
        return handleCurrentChange(currentIndex.value,e);
    })
}
const handleCurrentChange = (e,_pageSize)=>{
    _pageSize = currentSize.value
    console.log(e,_pageSize);
    tableData.value = orginList.value.slice((_pageSize*e) -_pageSize,_pageSize*e)
    beforeIndex.value = e

}

const db_Click = (e)=>{
    form.value.price = (form.value.rentPrice * form.value.rentDay)
    console.log(e);
    form.value = e
    dialogVisible.value = true
}

const updateAPI =  () =>{
    dialogVisible.value = false
    // console.log(form.value);
    axios({
        method:'post',
        url:store.state.url + '/orders/update',
        data:form.value,
    }).then(res=>{
        if (res.data.code == 200) {
            ref_messageComp.value.messageSuccess('您更新了一条记录')
        }else{
            ref_messageComp.value.messageFail('更新失败')
        }
    }).catch(err=>{
        ref_messageComp.value.messageNetFail('网络连接失败，请检查服务器')
    })
}
// 获取用户列表
const getData = ()=>{
    axios({
        url:store.state.url + '/orders'
    }).then(res=>{
        console.log(res);
        if (res.data.code == 200) {
            let arr = res.data.data
            orginList.value = []
            arr.forEach(element => {
                if (element.status == '待审批') {
                    orginList.value.push(element)
                }
            });
            total.value = orginList.value.length
            tableData.value = orginList.value.slice(0,currentSize.value)
        }
    }).catch(err=>{
        ref_messageComp.value.messageNetFail('网络连接失败，请检查服务器')
    })
}

// 刷新
const refresh = (n)=>{
    tableData.value = []
    if (n) {
        ref_messageComp.value.loading({dom:'.allbox',text:'数据拉取中..',},1000,()=>{
            ref_messageComp.value.messageSuccess('刷新成功')
            getData()
        })
        return;
    }
    getData()
}
// 执行区
refresh()
</script>


<style scoped>
.allbox{
    position: absolute;
    top: 0%;
    left: 0px;
    width: 100%;
    height: 100%;
    border: 2px solid #ccc;
    color: black;
    border-radius: 10px;
    /* border: 1px solid ; */
}
.selection{
    margin: 10px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    /* border: 2px solid; */
    display: flex;

}
.selection>div{
    width: 70px;
    height: 100%;
    margin-left: 10px;
    border-radius: 5px;
}
/* 刷新 */
.selection>div:nth-child(1){
    margin-left: 40px;
}
.roles{
    width: 40%;
    margin: 5px;
    /* border: 2px solid ; */
}


</style>